<template>
  <view class="acccount-page">
    <view class="withdrawal-num">
      <view class="num-title">支付宝账号</view>
      <view class="num-int">
        <up-input placeholder="输入支付宝账号" border="bottom" type="text" v-model="acccount" @update:modelValue="onloginShow">
        </up-input>
      </view>
      <up-button text="提交" color="#A4682F" :disabled="loginShow" @click="onPayment"></up-button>
    </view>
  </view>
</template>

<script setup>
  import {
    bindAlipay,
    info
  } from '../api.js'
  import {
    ref
  } from 'vue'
  const acccount = ref('')
  const loginShow = ref(true)

  function onloginShow(val) {
    loginShow.value = acccount.value ? false : true
  }
  const onPayment = (async () => {
    const res = await bindAlipay({
      alipay: acccount.value
    })
    if (res && res.code == 1) {
      uni.showToast({
        title: "绑定成功",
        icon: 'none'
      })
      infoApi()
      setTimeout(() => {
        uni.navigateBack(-1)
      }, 300)
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }

  })
  const infoApi = (async () => {
    const res = await info()
    if (res && res.code === 1) {
      uni.setStorageSync("user", res.data)
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })
</script>

<style lang="scss" scoped>
  .acccount-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40rpx 30rpx;

    .withdrawal-num {
      width: 100%;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 20rpx 30rpx;

      .num-title {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 34rpx;
        color: #3B3B3B;
      }

      .num-int {
        box-sizing: border-box;
        padding: 20rpx 0;
        border-bottom: 4rpx solid #F2F2F2;
      }

      ::v-deep .u-button--square {
        border-radius: 12rpx;
      }
    }

  }
</style>